:host {
  display: block;
  padding: 14px;
}

.card {
  background: #fff;
  border-radius: 2px;
  margin: 10px;

  &-header {
    min-height: 64px;
    border-bottom: 1px solid #e0e0e0;
    font-size: 20px;

    padding: {
      left: 24px;
      right: 24px;
    }
  }

  &-content {
    min-height: 56px;
  }

  &-footer {
    padding: 8px;
    padding-left: 24px;
    border-top: 1px solid #e0e0e0;
  }
}

.task-container {
  border-bottom: 1px solid #e0e0e0;

  &:last-child {
    border-bottom: 0;
  }
}

.task {
  padding: {
    left: 24px;
    right: 24px;
  }
  min-height: 56px;

  &.active,
  &:hover {
    background: #f5f5f5;
  }

  .checkbox {
    margin-right: 24px;
  }
}

.widget {
  margin: 0 10px;
}
